<template>
  <view class="w100p pr common_wrap">
    <CommonHeader
      v-if="statusFlag == 1"
      :title="$t('未付款/待确认')"
      color="#000"
      backgroundColor="rgba(236,246,254,1)"
      :is-right="false"
    ></CommonHeader>
    <CommonHeader
      v-else-if="statusFlag == 2 || statusFlag == 3"
      :title="$t('已付款')"
      color="#000"
      backgroundColor="rgba(236,246,254,1)"
      :is-right="false"
    ></CommonHeader>
    <CommonHeader
      v-else-if="statusFlag == 4"
      :title="$t('已结算')"
      color="#000"
      backgroundColor="rgba(236,246,254,1)"
      :is-right="false"
    ></CommonHeader>
    <CommonHeader
      v-else-if="statusFlag == 5"
      :title="$t('售后')"
      color="#000"
      backgroundColor="rgba(236,246,254,1)"
      :is-right="false"
    ></CommonHeader>
    <CommonHeader
      v-else-if="statusFlag == 6"
      :title="$t('已取消')"
      color="#000"
      backgroundColor="rgba(236,246,254,1)"
      :is-right="false"
    ></CommonHeader>
    <view v-if="statusFlag == 1 &&detailInfo.day != 0" class="timeOut">
      {{ $t('还剩') }}<uni-countdown
        :show-day="true"
        :hour="miniteObj.hour"
        :minute="miniteObj.minute"
        :second="miniteObj.second"
        color="#FF6A00"
        @timeup="onTimeup"
      ></uni-countdown
      >{{ $t("订单") }} {{ $t('自动取消') }}
    </view>
    <view class="w100p flex-item oh">
      <scroll-view scroll-y class="w100p scroll-Y">
        <!-- 采购 -->
        <view class="wrapper-info pr">
          <!-- 基础信息 -->
          <view class="base-info" v-if="detailInfo.user_info" @click="goPerson">
            <view class="left-avatar">
              <view class="avatar">
                <image
                  :src="getImageUrl(detailInfo.user_info.avatar)"
                  mode="aspectFill"
                  class="w-100 h-100"
                  style="border-radius: 500rpx"
                ></image>
              </view>
            </view>
            <!-- 单数 -->
            <view style="flex: 1">
              <view class="flex mt-10">
                <flag
                  class="w-30 h-20 mr-4 ml-15"
                  :country="detailInfo.user_info.country"
                />
                <view class="name ellipsis_one">{{
                  detailInfo.user_info[plang("username")]
                }}</view>
              </view>
              <view :class="langR == 'zh'?'between h-60':'between h-60 r_between'">
                <p class="user-sty">
                  {{
										[$t('供应商'),$t('经销商'),$t('货代公司'),$t('采购商'),$t('服务公司'),$t('报关公司'),$t('运输公司'),$t('国际物流公司'),$t('司机'),$t('服务商'),$t('俄罗斯个人'),$t('翻译员')][detailInfo.identity_type]
                  }}
                </p>

                <!-- <p class="user-sty"></p> -->
                <view class="right-numwrap">
                  <view class="getInfo" @click.stop="inlineCall(detailInfo)">{{
                    $t("联系TA")
                  }}</view>
                  <view class="getInfo" @click.stop="callPhone(detailInfo)">{{
                    $t("打电话")
                  }}
                   <image
                    src="/static/translatexx.png"
                    class="translatexxxxxx"
                    mode="widthFix"
                  />
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="centerContBox">
            <view class="centerCont"  v-for="(item, index) in detailInfo.order_shop" :key="index">
              <view class="flex">
                <view class="leftCont">
                  <image
                    class="pic"
                    :src="
                      getImageUrl(item.pic.split(',')[0])
                    "
                    mode="aspectFill"
                  />
                </view>
                <view class="cenCont ml-10">
                  <view class="cenContTop">
                    {{ item[plang("name")] }}
                  </view>
                  <view class="cenContB">
                    {{ item[plang("ggname")] }}
                  </view>
                </view>
              </view>
              <view class="rightCont">
                <view class="cenContTop font-bold">
                  {{ item.cost_price }}
                </view>
                <view class="cenContB" style="text-align: right">
                  {{ $t("共") }}{{ item.num }}{{ $t("件") }}
                </view>
              </view>
            </view>
          </view>

          <view
            v-if="
              statusFlag == 1 &&
              ((detailInfo.mailing_type == '2' &&
                detailInfo.shipping_fee != '0.00') ||
                detailInfo.mailing_type == '1')
            "
            class="caigou-info"
          >
            <view class="">
              <view class="fz26 text-010 font-bold">{{
                $t("上传付款凭证")
              }}</view>
              <view class="upload-li">
                <!-- <view class="">上传{{$t('商品')}}图片<text class="require">*</text><text class="yaoqiu">{{$t('支持')}}jpeg、jpg、png (大小5m内)</text></view> -->
                <view class="uploads">
                  <view
                    class="img"
                    v-for="(item, index) in productImgUrls"
                    :key="index"
                    @click="onPreview(item.fullurl)"
                  >
                    <image :src="item.fullurl" mode="aspectFill" />
                    <!-- <view
                      class="delete"
                      @click.stop="onDelete(index, 'productImgUrls')"
                    >
                      <view class="lien"></view>
                    </view> -->
                  </view>
                  <view
                    class="img mt-15"
                    @click="onUpload({ type: 'image', size: 7, count: 1 })"
                    v-if="productImgUrls.length < 12"
                  >
                    <image src="/static/caigou/upload.png" />
                  </view>
                </view>
                <p
                  v-if="(productImgUrls.length == 0) & submitBtn"
                  class="fz22 mt-5 mb-10"
                  style="color: #ff0000"
                >
                  {{ $t("请上传付款凭证") }}
                </p>
              </view>
            </view>
            <button class="uploadBtn" @click="uploadPay" style="margin-top: 18rpx;">
              <p>{{ $t("上传凭证") }}</p>
            </button>
            <!-- <view class="list">
		  	  <view class="txt">{{$t('商品')}}价格</view>
		  	  <view class="txt font-bold">￥1444</view>
		  	</view>
		  	<view class="list">
		  	  <view class="txt">运费</view>
		  	  <view class="fz24 font-bold" style="color: #ff0000;">待商家回复</view>
		  	</view>
		  	<view class="list">
		  	  <view class="txt">优惠</view>
		  	  <view class="txt font-bold">￥1444</view>
		  	</view>
		  	<view class="allPrice">
		  		共减<span style="margin-right: 20rpx;">￥40</span>总合计<span>￥7000</span>
		  	</view> -->
          </view>
          <view class="caigou-info">
            <view class="title">
              <view class="name">{{ $t("订单信息") }}</view>
              <view class="txt" @click="orderInfoOn = !orderInfoOn">{{
                orderInfoOn ? $t("收起") : $t("展开")
              }}</view>
            </view>
            <!-- <view class="list">
              <view class="txt">{{ $t("币种") }}</view>
              <view class="fz24 font-bold" style="color: #ff6a00">{{
                detailInfo.currency
              }}</view>
            </view> -->
            <view class="list">
              <view class="txt">{{ $t("订单编号") }}</view>
              <view class="txt" style="text-align: right"
                >{{ detailInfo.order_number
                }}<span style="margin: 0 10rpx">|</span
                ><span @click="copyToClipboard(detailInfo.order_number)">{{
                  $t("复制")
                }}</span></view
              >
            </view>
            <view class="" v-if="orderInfoOn">
              <view class="list">
                <view class="txt">{{ $t("下单时间") }}</view>
                <view class="txt">{{ detailInfo.create_time }}</view>
              </view>
              <view class="list">
                <view class="txt">{{ $t("发货地址") }}</view>
                <view
                  class="text-010 fz24"
                  style="max-width: 500rpx; text-align: right"
                  >{{ detailInfo[plang("address")] }}</view
                >
              </view>
              <view class="list">
                <view class="txt">{{ $t("收货地址") }}</view>
                <view
                  class="text-010 fz24"
                  style="max-width: 500rpx; text-align: right"
                  >{{ detailInfo[plang("destination")] }}</view
                >
              </view>
              <view class="list">
                <view class="txt">{{ $t("运输方式") }}</view>
                <view class="txt">{{
                  detailInfo.mailing_type == 1 ? $t("自提") : $t("卖家发货")
                }}</view>
              </view>
              <view class="">
                <view class="fz24 text-888">{{ $t("收款账号图片") }}</view>
                <view class="mt-10">
                  <image
                    :src="getImageUrl(urlImg)"
                    mode="widthFix"
										@click="onPreview(urlImg)"
                  ></image>
                </view>
              </view>
              <view v-if="statusFlag == 4" class="list">
                <view class="txt">{{ $t("支付状态") }}</view>
                <view class="txt" style="color: #03c24f">{{ $t("成功") }}</view>
              </view>
              <view
                v-if="
                  (statusFlag == 4 || statusFlag == 3 || statusFlag == 2 || statusFlag == 1) &&
                  detailInfo.payment_voucher
                "
                class="list"
              >
                <view class="txt">{{ $t("支付凭证") }}</view>
                <view class="flex img-overx">
                  <image
                    v-for="item in detailInfo.payment_voucher.split(',')"
                    :src="getImageUrl(item)"
                    @click="onPreview(item)"
                    mode="aspectFill"
                    class="w-150 h-150 ml-10"
                  ></image>
                </view>
              </view>
            </view>
          </view>
          <view class="caigou-info">
            <view class="title" style="margin-bottom: 0;">
              <view class="name">{{ $t("订单总价") }}</view>
              <view class="status font-bold"
                >{{ detailInfo.currency }}{{ detailInfo.total_price ||0 }}</view
              >
            </view>
            <!-- <view class="list">
              <view class="txt">{{ $t("商品价格") }}</view>
              <view class="txt font-bold"
                >{{ detailInfo.currency }} {{ detailInfo.price }}</view
              >
            </view> -->
            <view v-if="detailInfo.mailing_type == '2'" class="list">
              <view class="txt">{{ $t("运费") }}</view>
              <!-- <view class="txt font-bold">￥1444</view> -->
              <view
                v-if="detailInfo.shipping_fee == '0.00'"
                class="fz24 font-bold"
                style="color: #ff0000"
                >{{ $t("待商家回复") }}</view
              >
              <view v-else class="fz24 font-bold text-888"
                >{{ detailInfo.currency }} {{ detailInfo.shipping_fee }}</view
              >
            </view>
            <!-- <view class="list">
				  <view class="txt">{{$t('优惠')}}</view>
				  <view class="txt font-bold"></view>
				</view>
				<view class="allPrice">
					{{$t('共减')}}<span style="margin-right: 20rpx;">{{detailInfo.currency}} {{detailInfo.total_price}}</span>{{$t('总合计')}}<span>{{detailInfo.currency}} {{detailInfo.total_price}}</span>
				</view> -->
          </view>

          <view
            v-if="statusFlag == 4 && detailInfo.settlement_info"
            class="caigou-info"
          >
            <view class="title">
              <view class="name">{{ $t("GLUZ结算帐单") }}</view>
              <view class="txt" @click="orderPayOn = !orderPayOn">{{
                orderPayOn ? $t("收起") : $t("展开")
              }}</view>
            </view>
            <view class="list">
              <view class="txt">{{ $t("付款金额") }}</view>
              <view class="fz24 font-bold" style="color: #ff6a00"
                >{{ detailInfo.currency }}
                {{ get(detailInfo, "settlement_info.pay_price") }}</view
              >
            </view>
            <view class="list">
              <view class="txt">{{ $t("币种") }}</view>
              <view class="fz24 font-bold" style="color: #ff6a00">{{
                detailInfo.currency
              }}</view>
            </view>
            <view class="list">
              <view class="txt">{{ $t("技术服务费") }}</view>
              <view class="fz24 font-bold text-010"
                >{{ detailInfo.currency }}
                {{ get(detailInfo, "settlement_info.service_fee") }}</view
              >
            </view>
            <view class="" v-if="orderPayOn">
              <view class="list">
                <view class="txt">{{ $t("结算时间") }}</view>
                <view class="txt">{{
                  get(detailInfo, "settlement_info.settlement_time")
                }}</view>
              </view>
              <view class="list">
                <view class="txt">{{ $t("支付银行账号") }}</view>
                <view class="txt">{{
                  get(detailInfo, "settlement_info.bank_account")
                }}</view>
              </view>
              <view class="list">
                <view class="txt">{{ $t("开户行") }}</view>
                <view
                  class="txt"
                  style="max-width: 500rpx; text-align: right"
                  >{{
                    get(detailInfo, `settlement_info.${plang("opening_bank")}`)
                  }}</view
                >
              </view>
              <view class="list">
                <view class="txt">{{ $t("支付状态") }}</view>
                <view class="fz24" style="color: #03c24f">{{
                  get(detailInfo, "settlement_info.pay_status") == 1
                    ? $t("成功")
                    : $t("失败")
                }}</view>
              </view>
              <!-- <view class="list">
					  <view class="txt">{{$t('支付凭证')}}</view>
					  <view class="imgs">
						  <image src="/static/caigou/pic.png" mode="aspectFill" class="w-150 h-150" ></image>
					  </view>
					</view> -->
            </view>
          </view>

          <!-- <view v-if="statusFlag == 4 && detailInfo.after_sales" class="caigou-info">
				<view class="title">
				  <view class="name">{{$t('处理结果')}}</view>
				  <view class="txt" @click="orderSaleOn=!orderSaleOn">{{orderSaleOn? $t('收起'):$t('展开')}}</view>
				</view>
				<view class="list">
				  <view class="txt">{{$t('是')}}{{$t('否')}}赔付</view>
				  <view class="fz24" style="color: #03C24F;">已赔付</view>
				</view>
				<view class="list">
				  <view class="txt">付款金额</view>
				  <view class="fz24 font-bold" style="color: #FF6A00;">￥7000.15</view>
				</view>
				<view class="list">
				  <view class="txt">币种</view>
				  <view class="fz24 font-bold" style="color: #FF6A00;">CNY</view>
				</view>
				<view class="" v-if="orderSaleOn">
					<view class="list">
					  <view class="txt">结算时间</view>
					  <view class="txt">2024-12-19 15:07:30</view>
					</view>
					<view class="list">
					  <view class="txt">支付银行账号</view>
					  <view class="txt">679990122000230744</view>
					</view>
					<view class="list">
					  <view class="txt">{{$t('开户行')}}</view>
					  <view class="txt" style="max-width: 500rpx;text-align: right;">黑河农村商业银行股份有限公司</view>
					</view>
					<view class="list">
					  <view class="txt">支付状态</view>
					  <view class="fz24" style="color: #03C24F;">成功</view>
					</view>
					<view class="list">
					  <view class="txt">支付凭证</view>
					  <view class="imgs">
						  <image src="/static/caigou/pic.png" mode="aspectFill" class="w-150 h-150" ></image>
					  </view>
					</view>
				</view>
			</view> -->

          <view v-if="detailInfo.after_sales" class="caigou-info">
            <view class="title">
              <view class="name">{{ $t("售后详情") }}</view>
              <view class="txt" @click="AfterSalesOpen = !AfterSalesOpen">{{
                AfterSalesOpen ? $t("收起") : $t("展开")
              }}</view>
            </view>
            <view
              v-if="get(detailInfo, 'after_sales.buyer_agree_status') == 0"
              class="list"
            >
              <view class="txt">{{ $t("申请原因") }}</view>
              <view class="txt" style="max-width: 500rpx; text-align: right">{{
                get(detailInfo, `after_sales.${plang("reason")}`)
              }}</view>
            </view>
            <view class="list">
              <view class="txt">{{ $t("赔付比例") }}</view>
              <view class="txt"
                >{{
                  get(detailInfo, "after_sales.buyer_agree_status") == 1
                    ? get(detailInfo, "after_sales.platform_compensation_ratio")
                    : get(detailInfo, "after_sales.compensation_ratio")
                }}%</view
              >
            </view>
            <view
              class=""
              v-if="
                get(detailInfo, 'after_sales.buyer_agree_status') == 0 &&
                AfterSalesOpen
              "
            >
              <view class="list" style="align-items: flex-start">
                <view class="txt">{{ $t("上传图片") }}</view>
                <view>
                  <image
                    v-for="item in get(
                      detailInfo,
                      'after_sales.image_url'
                    ).split(',')"
                    :src="getImageUrl(item)"
                    mode="aspectFill"
                    class="w-150 h-150"
                  ></image>
                </view>
              </view>
              <view
                v-if="get(detailInfo, 'after_sales.video_url')"
                class="list"
                style="align-items: flex-start"
              >
                <view class="txt">{{ $t("上传视频") }}</view>
                <view>
                  <image
                    v-for="item in get(
                      detailInfo,
                      'after_sales.video_url'
                    ).split(',')"
                    :src="getImageUrl(item)"
                    mode="aspectFill"
                    class="w-150 h-150"
                  ></image>
                </view>
              </view>
            </view>
            <!-- <view class="" v-if="AfterSalesOpen">
					<view class="list" style="align-items: flex-start;">
					  <view class="txt">需求{{$t('商品')}}</view>
					  <view >
						  <sunui-upimg :url="upPicUrl" ref="upload1" title="店铺logo" @upload="handleLoaded1" @change="handleChange1" :number="3"></sunui-upimg>
					  </view>
					</view>
					<view class="list" style="align-items: flex-start;">
					  <view class="txt">{{$t('上传图片')}}</view>
					  <view >
						  <sunui-upimg :url="upPicUrl" ref="upload1" title="店铺logo" @upload="handleLoaded1" @change="handleChange1" :number="3" type="video"></sunui-upimg>
					  </view>
					</view>

				</view> -->
          </view>
          <view
            v-if="statusFlag == 4 && detailInfo.pu_comment"
            class="caigou-info"
          >
            <view class="title">
              <view class="name">{{ $t("评价") }}</view>
              <view class="txt"></view>
            </view>
            <view class="evaluateBox">
              <view class="evaluateImg">
                <image
                  :src="
                    getImageUrl(get(detailInfo, 'pu_comment.user_info.avatar'))
                  "
                  mode=""
                ></image>
              </view>
              <view class="evaluate">
                <view class="evaluateName">
                  {{
                    get(detailInfo, `pu_comment.user_info.${plang("username")}`)
                  }}
                </view>
                <view class="evaluateRate">
                  <view class="flex-start mt-15">
                    <view class="" v-for="(it, ind) in scoreList">
                      <image
                        v-if="it.num <= get(detailInfo, 'pu_comment.star')"
                        class="ml-8 w-25 h-25"
                        src="/static/img/starBright.png"
                      ></image>
                      <image
                        v-else
                        class="ml-8 w-25 h-25"
                        src="/static/img/starDark.png"
                      ></image>
                    </view>
                  </view>
                </view>
                <view class="evaluateCont">
                  {{ get(detailInfo, `pu_comment.${plang("content")}`) }}
                </view>
                <view class="evaluateDate">
                  <view class="">
                    {{ get(detailInfo, "pu_comment.create_time") }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 采购信息 -->
          <!-- <view class="caigou-info">
            <view class="title">
              <view class="name">{{$t('采购信息')}}</view>
              <view class="status">{{$t('进行中')}}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('需求商品')}}</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">期望品牌</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">期望单价</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">目的地</view>
              <view class="txt">俄罗斯</view>
            </view>
            <view class="list">
              <view class="txt">需求数量</view>
              <view class="txt">1{{$t('台')}}</view>
            </view>
            <view class="list">
              <view class="txt">期望生产日期</view>
              <view class="txt">2025-1-10 至 2025-1-15</view>
            </view>
          </view> -->
          <!-- 参与信心 -->
          <!--   <view class="caigou-info">
            <view class="title">
              <view class="name">参与信息</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品')}}名称</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品')}}品牌</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品')}}报价（单价）</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品')}}报价（单价）</view>
              <view class="txt">俄罗斯</view>
            </view>
            <view class="list">
              <view class="txt">发货时间</view>
              <view class="txt">1{{$t('台')}}</view>
            </view>
            <view class="list">
              <view class="txt">发货地址</view>
              <view class="txt">俄罗斯</view>
            </view> -->
          <!-- 图片列表  -->
          <!-- <view class="w100p ">
              <view class="w100p shop_introduce">
                <view class="title">{{$t('商品')}}简介</view>
                <view class="jianjie">
                  <u-parse :html="$t('这个是商品介绍介绍这个是商品介绍介绍这个是商品介绍介绍')"></u-parse>
                </view>
              </view>
          

            </view> -->
          <!-- 商品其他文件 -->
          <!-- <view class="file-wrap">
              <view class="w100p big_title">
                {{$t('商品')}}图片
              </view>
              <scroll-view scroll-x class="scrolxxx-wwww">
                <view class="w100p scrolxxx">
                  <image class="goback_img" :src="item" mode="aspectFill" @click="amplifyImg(item)"
                    v-for="(item, index) in [...list, ...list]" :key="index"></image>
                </view>
              </scroll-view>
            </view>
            <view class="file-wrap">
              <view class="w100p big_title">
                {{$t('商品')}}视频
              </view>
              <scroll-view scroll-x class="scrolxxx-wwww">
                <view class="w100p scrolxxx">
                  <image class="goback_img" :src="item" mode="aspectFill" @click="amplifyImg(item)"
                    v-for="(item, index) in [...list, ...list]" :key="index"></image>
                </view>
              </scroll-view>
            </view>
            <view class="file-wrap">
              <view class="w100p big_title">
                {{$t('商品')}}相关文件
              </view>
              <scroll-view scroll-x class="scrolxxx-wwww">
                <view class="w100p scrolxxx">
                  <image class="goback_img" :src="item" mode="aspectFill" @click="amplifyImg(item)"
                    v-for="(item, index) in [...list, ...list]" :key="index"></image>
                </view>
              </scroll-view>
            </view>
          </view> -->

          <!-- </view> -->
          <view style="height: 16rpx"></view>
        </view>
      </scroll-view>
    </view>

    <!-- 底部导航栏 -->
    <view class="footer-nav">
      <view class="footer-wrapper">
        <!-- <view class="btn blue">
          拨打{{$t('视频通话')}}
        </view> -->
        <!-- 如果买家选择自提货物会有发布货源按钮，跳转发布运输；如果买家合作的时候选择卖家发货，那就没有按钮只展示详情 -->
        <!-- <view v-if="statusFlag == 1 && detailInfo.mailing_type == 1" class="btn blueBuy" @click="onSendShiping">{{$t('发布')}}货源</view> -->
        <!-- 如果用户未发布，点击立即发货，如果点击过后展示 -- 申请售后和同意付款 -->
        <view
          v-if="statusFlag == 2 && detailInfo.mailing_type == 1"
          class="btn blueBuy"
          @click="onSendShiping"
          >{{ $t("立即发货") }}</view
        >
        <button
          v-if="statusFlag == 3"
          :disabled="btnDis"
          class="btn bluePart"
          @click="afterSale"
        >
          {{ $t("申请售后") }}
        </button>
        <button
          v-if="statusFlag == 3"
          :disabled="btnDis"
          class="btn green"
          @click="confirmModal = true"
        >
          {{ $t("同意付款") }}
        </button>
      </view>
    </view>

    <!-- 播放视频 -->
    <uni-popup
      ref="popupVideo"
      type="center"
      background-color="#000"
      mask-background-color="#000"
      class="popvexxx"
    >
      <view class="wrapper-video">
        <video
          id="mainVideo"
          :src="playVideo"
          :show-center-play-btn="true"
          object-fit="cover"
          play-btn-position="center"
          :controls="true"
          :autoplay="true"
          class="video-main"
        ></video>
      </view>
    </uni-popup>

    <!-- 图片放大 -->
    <uni-popup
      ref="popup"
      class="common_pop"
      mask-background-color="rgba(0,0,0,1)"
    >
      <view class="w100p">
        <image
          class="w100p"
          :src="commonImg"
          mode="widthFix"
          @click="closePop"
        ></image>
      </view>
    </uni-popup>

    <u-modal
      :confirm-text="$t('确定')"
      :cancel-text="$t('取消')"
      class="modalSty"
      v-model="confirmModal"
      :content="$t('是否确认付款?')"
      :showCancelButton="true"
      @cancel="confirmModal = false"
      @confirm="confirmPay"
      :show-title="false"
    ></u-modal>

    <u-modal
      :confirm-text="$t('确定')"
      :cancel-text="$t('取消')"
      class="modalSty"
      :show-title="false"
      v-model="confirmSocure"
      :content="$t('货源已发布成功')+'!'"
    ></u-modal>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { IMAGE_URL } from "@/config/app";

import CommonHeader from "@/pages/components/common-header.vue";
import sunuiUpimg from "@/components/tm-upload/tm-upload.vue";
import { uploadFile, chooseFile } from "@/assets/public.js";
import { scorePayment } from "@/api/basic";


import {
  Shoporderpurchase_detaile,
  Shoporderup_payment_voucher,
  Shoporderconfirm_pay,
  Shoporderyuntrace_update,
} from "@/api/freight.js";
import { request_minute } from "@/api/basic.js";
export default {
  data() {
    return {
      statusBarHeight: uni.getStorageSync("statusBarHeight"),
      videos: null, // 播放ref
      submitBtn: false,
      productImgUrls: [],
      playVideo: "",
      commonImg: "",
      currntMainPic: "",
      confirmModal: false,
      confirmSocure: false,
      currentVideo: "",
      isShow: true,
      scoreList: [
        {
          num: 1,
        },
        {
          num: 2,
        },
        {
          num: 3,
        },
        {
          num: 4,
        },
        {
          num: 5,
        },
      ],
      historyList: [], //浏览记录列表
      list: [],
      product: {},
      orderInfoOn: true,
      orderPayOn: false,
      orderSaleOn: false,
      AfterSalesOpen: false,
      detailInfo: {},
      uniRate: 2,
      statusFlag: 1,
      yuntrace_id: "",
      btnDis: false,
      imgUrls: "",
      // IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
      upPicUrl:
        "https://cx.csredian.com/app/index.php?i=7&c=entry&a=wxapp&v=2.2.4&do=upload_img&m=wjyk_sqpt",
				urlImg: '',
        miniteObj: {
          hour: 0,
          minute: 0,
          second: 0
        }
    };
  },
  components: {
    CommonHeader,
    sunuiUpimg,
  },
  methods: {
    goPerson() {
      if (this.detailInfo.identity_type == 0) {
        uni.navigateTo({
          url: `/pages/details/merchantDetail?bid=${this.detailInfo.bid}`,
          webview: 'zWebViewShop'
        })
      } else {
        uni.navigateTo({
          url: `/pages/myPersonPage/index?targetUserId=${	this.detailInfo.pre_user_id}`,
          webview: 'zWebView'
        })
      }
    },
    	// 倒计时
		onTimeup() {
			if(this.detailInfo.order_id) {
				this.purchaseDetaile(this.detailInfo.order_id);
			}
		},
		onPreview(urlImg){
			uni.previewImage({
				urls: [urlImg],
				current: urlImg,
			})
		},
		getImg() {
      scorePayment({}).then((res) => {
        this.urlImg = res.data.data.img;
      });
    },
    inlineCall(info) {
      this.isMessageGo({
        action: "initiateChat",
        data: info.pre_user_id,
      });
    },
    callPhone(item) {
      if (uni.getStorageSync("user_id") == item.pre_user_id) {
        uni.showToast({
          title: "不能给自己打电话",
          icon: "none",
        });
      } else {
        request_minute({
          user_id: uni.getStorageSync("user_id"),
          target_id: item.pre_user_id,
        }).then((res) => {
          if (res.data.data.flag == 1) {
            this.isMessageGo({
              action: "call",
              data: {
                userId: item.pre_user_id,
                type: res.data.data.type || 1,
              },
            });
          } else {
            uni.showToast({
              title: this.$t("积分不足，请充值积分"),
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/vip/scorePoint",
                webview: "zWebView",
              });
            }, 500);
          }
        });
      }
    },
    // 上传视频和图片
    async onUpload({ type, size, count }, keyx) {
      let res = await uploadFile(
        await chooseFile({
          type,
          size,
          count,
        })
      );
      if (type == "image") {
        console.log("res--", res);
        this.productImgUrls.push(res);
      }
      // if (type == 'video') {
      // 		console.log('res--', res)
      // 	this.options.productVideoUrls = [res];
      // }
    },
    confirmId() {
      // return
      uni.showLoading({
        title: this.$t('加载中'),
      });
      Shoporderyuntrace_update({
        user_id: uni.getStorageSync("user_id"),
        order_id: this.detailInfo.order_id,
        yuntrace_id: this.yuntrace_id,
      }).then((res) => {
        this.confirmModal = false;
        uni.hideLoading();
        uni.redirectTo({
          url: "/pages/shopOrder/order/index?type=1&status=3",
        });
      });
    },
    confirmPay() {
      this.btnDis = true;
      Shoporderconfirm_pay({
        user_id: uni.getStorageSync("user_id"),
        order_id: this.detailInfo.order_id,
      }).then((res) => {
        if (res.data.code == 200) {
          // uni.$u.toast(res.data.message);
          uni.$u.toast(res.data[this.plang('message')])
          uni.redirectTo({
            url: "/pages/shopOrder/order/index?type=1&status=4",
          });
        } else {
          // uni.$u.toast(res.data.message);
          uni.$u.toast(res.data[this.plang('message')])
          this.btnDis = false;
        }
      });
    },
    // 复制文本到剪切板
    copyToClipboard(text) {
      uni.setClipboardData({
        data: text,
        success:  ()=> {
          uni.showToast({
            title: this.$t("复制成功"),
            icon: "success",
            duration: 2000,
          });
        },
        fail:  ()=> {
          uni.showToast({
            title: this.$t("复制失败"),
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
    uploadPay() {
      this.submitBtn = true;
      if (this.productImgUrls.length == 0) return;
      if (this.detailInfo.payment_voucher) {
        if (this.productImgUrls.length == this.detailInfo.payment_voucher.split(',').length) {
          uni.showToast({
            title: this.$t("请选择付款凭证"),
            icon: "none",
            duration: 2000,
          });
          return;
        }
      }

      // const imgStr =
      for (let i = 0; i < this.productImgUrls.length; i++) {
        if (i > 0) {
          this.imgUrls += "," + this.productImgUrls[i].fullurl;
        } else {
          this.imgUrls = "" + this.productImgUrls[i].fullurl;
        }
      }
      // return
      Shoporderup_payment_voucher({
        user_id: uni.getStorageSync("user_id"),
        order_id: this.detailInfo.order_id,
        payment_voucher: this.imgUrls,
      }).then((res) => {
        if (res.data.code == 200) {
          uni.showToast({
            title: this.$t("上传成功"),
            icon: "success",
            duration: 2000,
          });
          setTimeout(() => {
            uni.navigateBack()
          }, 300)
          // uni.redirectTo({
          //   url: `/pages/shopOrder/order/index?status=2&type=1`,
          // });
        } else {
          // uni.$u.toast(res.data.message);
          uni.$u.toast(res.data[this.plang('message')])
        }
      });
    },
    // 删除图片
    onDelete(index, arr) {
      this[arr].splice(index, 1);
      this.$forceUpdate();
    },
    onPreview(current) {
      uni.previewImage({
        current,
        urls: [current],
      });
    },
    // 发货
    onSendShiping() {
      uni.navigateTo({
        url: `/pages/publish/start?shopper=1&buyFlag=1&orderId=${this.detailInfo.order_id}`,
        webview: "zWebView",
      });
    },
    afterSale() {
      uni.redirectTo({
        url: `/pages/shopOrder/reasonAfterSale?order_id=${this.detailInfo.order_id}`,
      });
    },
    // 查看物流
    onSeeWuliu() {
      uni.navigateTo({
        url: "/pages/shipmentRecord/index?status=3",
        webview: "zWebView",
      });
    },
    getTopR() {
      return `calc(${+this.statusBarHeight}px + 44px + 400rpx)`;
    },
    // 播放头部视频
    playsHeader(video) {
      // 判断安卓
      const systemInfo = uni.getSystemInfoSync();
      // 判断是否为 Android 系统
      if (systemInfo.platform === "android") {
        this.playVideo = video;
        this.$refs.popupVideo.open();
        return;
      }
      this.videos.requestFullScreen();
      this.$nextTick(() => {
        this.videos.play();
      });
    },
    // 关闭图片弹窗
    closePop() {
      this.$refs.popup.close();
    },
    // 图片放大
    amplifyImg(imgUrl) {
      if (!imgUrl) return;
      this.commonImg = imgUrl;
      this.$refs.popup.open();
    },
    // 获取详情
    purchaseDetaile(order_id) {
      Shoporderpurchase_detaile({
        order_id: order_id,
        user_id: uni.getStorageSync("user_id"),
      }).then((res) => {
        if (res.data.code == 200) {
          this.detailInfo = res.data.data;
            if(this.detailInfo.payment_voucher) {
            let arr = this.detailInfo.payment_voucher.split(',')
            arr.forEach(item => {
              this.productImgUrls.push({
                fullurl: this.getImageUrl(item),
                url:  this.getImageUrl(item)
              })
            })
          }
          let time = this.detailInfo.day;
          this.miniteObj.hour = Math.floor(time / 3600)
          this.miniteObj.minute = Math.floor((time % 3600) / 60)
          this.miniteObj.second = time % 60
          if (this.confirmSocure) {
            this.confirmId();
          }
        } else {
          // uni.$u.toast(res.data.message);
          uni.$u.toast(res.data[this.plang('message')])
        }
      });
    },
    // 获取数据
    async getData() {
      const { data } = await this.$u.api.shopping.getProduct({
        id: 338,
      });
      this.currntMainPic = data.product.pic;
      this.list = [data.product.pic, data.product.pic, data.product.pic];
      this.currentVideo = data.product.video;
      this.product = data.product;
    },
    // 浏览记录列表
    async getHistoryData() {
      try {
        const { data } = await this.$u.api.shopping.getMemberHistory({
          id: 338,
          type: "shop",
        });
        this.historyNum = data.member_history_count || 0;
        if (!!data.member_history?.length) {
          let arr = [];
          data.member_history.map((item, index) => {
            let str = item[this.plang("username")] + this.$t("正在查看");
            arr.push(str);
          });
          this.historyList = [...arr];
        }
      } catch (e) {}
    },
  },

  onLoad(options) {
    this.getImg();
    if (options.status) {
      this.statusFlag = options.status;
    }
    if (options.order_id) {
      this.purchaseDetaile(options.order_id);
    }
    if (options.confirmModal) {
      this.purchaseDetaile(options.orderId);
      this.confirmSocure = options.confirmModal;
      this.yuntrace_id = options.yunzongId;
    }
    this.videos = uni.createVideoContext("myVideo");
    // this.getData();
    // this.getHistoryData();
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/appScss.scss";
@import "./index.scss";
.user-sty {
  background-image: url("../../../static/userLogoBg.png");
  background-size: 100% 100%;
  margin-left: 12rpx;
  min-width: 120rpx;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 20rpx;
  line-height: 30rpx;
  box-shadow: 0rpx 1.25rpx 0.75rpx 0rpx #d061024d;
  color: #ffffff;
  text-align: center;
  padding-left: 26rpx;
}
.uploadBtn {
  height: 80rpx;
  width: 100%;
  background-color: #007aff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 30rpx;
  border-radius: 16rpx;
}
.modalSty {
  text-align: center;
}
.rightCont{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
	height: 132rpx !important;
}
.r_between{
		.user-sty{
			padding:0 10rpx;
			background-image:none;
			border-radius: 500px;
			background: linear-gradient(90deg, #FF7000 0%, #FFA245 100%);
			box-shadow: -4px 4px 6px 0px rgba(255, 203, 151, 0.46) inset, -2px -3px 9.9px 0px #FFBE7C inset, 0px 4px 13.8px 0px #DEE1EF;


		}
	}

  .img-overx {
		overflow-x: auto;
		flex: 1;
		image {
			flex-shrink: 0;
		}
	}
</style>
